<template>
  <div id="indexComparison">
    <h2 class="title clearfix">
      <span>体征指标项对比</span>
      <div class="pull-right export">
        <button type="button" class="btn btn-default btn-sm" @click="exportClick">导出</button>
      </div>
    </h2>
    <vue-datepicker-local v-model="emptyTime" clearable :placeholder="'请选择时间范围'" />

    <moreLineEcharts
      class="line"
      v-if="indexListData[0].length !=0"
      :xAxis="signDate"
      :title="indexList"
      :opData="opData"
    ></moreLineEcharts>
    <loading v-if="isShow && indexListData[0].length == 0"></loading>
    <noSearch v-if="!isShow && indexListData[0].length == 0"></noSearch>
  </div>
</template>
<script>
import { apiInspectionComparison, exportB } from "@/api/api";
import { standardDate } from "@/components/common/date"; //引入时间转换JS
import VueDatepickerLocal from "@/components/datepicker/VueDatepickerLocal";
import moreLineEcharts from "@/components/echarts/duoLineEcharts";
import loading from "@/components/loading/loading";
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组件
export default {
  data() {
    return {
      emptyTime: [], //时间组件的值
      opData: [],
      isShow: true,
      startDate: "" /*开始时间*/,
      endDate: "", //结束时间
      yAxisIndex: [0, 1, 2, 3, 4, 5], //存储是否显示到左边还是右边
      signDate: [],
      indexListData: [[], [], [], [], [], []],
      indexList0: [], //对比指标的第一项
      indexList1: [], //对比指标的第二项
      indexList2: [], //对比指标的第三项
      indexList3: [], //对比指标的第四项
      indexList4: [], //对比指标的第五项
      indexList5: [] //对比指标的第六项
    };
  },
  computed: {
    indexList: function() {
      return this.$store.getters.indexList;
    }
  },
  watch: {
    emptyTime: {
      handler(curVal, oldVal) {
        if (
          standardDate(curVal[0]) == "NaN-NaN-NaN" ||
          standardDate(curVal[1]) == "NaN-NaN-NaN"
        ) {
          this.startDate = "";
          this.endDate = "";
          this.indexListData = [[], [], [], [], [], []];
          this.signDate = [];
          this.isShow = true;
          this.getInspectionComparison();
        } else {
          this.startDate = standardDate(curVal[0]);
          this.endDate = standardDate(curVal[1]);
          this.indexListData = [[], [], [], [], [], []];
          this.signDate = [];
          this.isShow = true;
          this.getInspectionComparison();
          //console.log(this.startDate, this.endDate)
        }
      }
    }
  },
  activated() {
    this.indexListData = [[], [], [], [], [], []];
    this.signDate = [];
    this.getInspectionComparison();
    // console.log(this.indexList)
  },
  methods: {
    exportClick() {
      let str = `?patientID=${this.$store.getters.ID}&startDate=${this.startDate}&endDate=${this.endDate}&itemName=${this.$store.getters.indexList + ""}`
      let href = exportB(str)
      window.open(href)
    },
    getInspectionComparison() {
      apiInspectionComparison({
        patientID: this.$store.getters.ID,
        itemName: this.$store.getters.indexList + "",
        startDate: this.startDate,
        endDate: this.endDate
      }).then(res => {
        this.opData = [];
        if (JSON.parse(res).Status == 1) {
          if (JSON.parse(res).Data.length != 0) {
            this.isShow = true;
            let ind = this.indexList.length;
            var name = [];
            let time = [];
            for (let index in this.indexList) {
              this.opData.push({
                name: this.indexList[index],
                type: "line",
                yAxisIndex: this.yAxisIndex[index],
                symbol: "emptycircle", //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
                data: this.indexListData[index]
              });
            }
            for (var i = 0; i < ind; i++) {
              for (var item of JSON.parse(res).Data) {
                //console.log(item.time_check)
                if ($.inArray(item.time_check, time) == -1) {
                  time.push(item.time_check);
                  this.signDate.push(this.filterDate(item.time_check));
                }
                if (item.REPORT_ITEM_NAME == this.indexList[i]) {
                  if (i == 0) {
                    name = this.indexListData[0];
                  } else if (i == 1) {
                    name = this.indexListData[1];
                  } else if (i == 2) {
                    name = this.indexListData[2];
                  } else if (i == 3) {
                    name = this.indexListData[3];
                  } else if (i == 4) {
                    name = this.indexListData[4];
                  } else if (i == 5) {
                    name = this.indexListData[5];
                  }
                  if (item.RESULT != "") {
                    name.push([this.filterDate(item.time_check), item.RESULT]);
                  }
                }
              }
            }
          } else {
            this.isShow = false;
          }
          //console.log(JSON.parse(res).Data)
          //console.log(this.indexListData[4])
        } else if (JSON.parse(res).Status == -1) {
          this.isShow = false;
          //console.log(res)
        }
      });
    },
    filterDate(time) {
      if (!time) {
        return "";
      } else {
        time = time.replace(/\//g, "-");
        return time.replace(/T/g, " ").substring(5, 16);
      }
    }
  },
  components: {
    moreLineEcharts,
    loading,
    noSearch,
    VueDatepickerLocal
  }
};
</script>
<style scoped>
#indexComparison {
  height: calc(100vh - 130px);
  padding: 20px 0 0;
}

.title {
  font-size: 18px;
  padding-left: 40px;
}

.title span:before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 20px;
  border-radius: 8px;
  margin-right: 8px;
  background: #11a7f3;
  vertical-align: text-top;
}

.datepicker {
  position: absolute;
  top: 15px;
  right: 170px;
}

.line {
  height: calc(100% - 30px);
  margin-top: 30px;
}

.export{
  padding-right: 45px;
}

@media screen and (max-width: 768px) {
}
@media screen and (max-width: 425px) {
  .datepicker {
    position: initial;
    top: 15px;
    right: 170px;
  }
}
</style>
